<template>
  <div class="container">
    <!-- <validate :visible="visible" :cb="validateCb" @close="visible = false" /> -->
    <div class="form">
      <div class="form-item">
        <div class="form-item-label">申请企业</div>
        <div class="form-item-val">
          <input
            type="text"
            value="深圳银灯物联科技有限公司"
            placeholder="请输入"
          />
        </div>
      </div>
      <div class="form-item">
        <div class="form-item-label">纳税人识别码</div>
        <div class="form-item-val">
          <input type="text" v-model="form.id" placeholder="请输入" />
        </div>
      </div>
      <div class="form-item">
        <div class="form-item-label">法人身份证号</div>
        <div class="form-item-val">
          <input type="text" v-model="form.cardId" placeholder="请输入" />
        </div>
      </div>
      <div class="form-item">
        <div class="form-item-label">法人手机号</div>
        <div class="form-item-val">
          <input type="text" v-model="form.phone" placeholder="请输入" />
        </div>
      </div>
    </div>

    <div class="loan-btn" :class="{ active: canNext }" @click="toNext">
      同意授权
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  computed: {
    canNext () {
      if (this.form.id && this.form.cardId && this.form.phone) {
        return true
      }
      return false
    }
  },
  data () {
    return {
      form: {
        id: '',
        cardId: '',
        phone: ''
      }
    }
  },
  mounted () {},
  methods: {
    toNext () {
      if (!this.canNext) return
      this.$toast2({
        msg: '授权成功!'
      })

      setTimeout(() => {
        this.$router.push({
          path: '/result',
          query: {
            type: 2
          }
        })
      }, 1500)
    },
    handleVoice () {},
    hideTipsModal () {
      this.tipsVisible = false
    },
    voiceOpen () {
      this.voiceVisible = true
      this.voiceState = 'start'
    },
    voiceStart () {
      this.voiceState = 'ing'
    },
    voiceEnd () {
      if (this.voiceState !== 'ing') return
      this.voiceState = 'end'
    },
    voiceClose (e) {
      e.prevent()
      this.voiceVisible = false
    },
    voiceBack (e) {
      e.prevent()
      this.voiceState = 'start'
    },
    voiceEnter (e) {
      this.form.phone = 18279741082
      this.voiceVisible = false
      this.canNext = true
    }
  }
}
</script>

<style lang="less" scoped>
.form {
  padding: 40px 28px;
  color: #fff;
  background-image: url("../assets/images/loan/border_pck3.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: none;
  // border: 1px solid #fff;
  text-align: left;

  .form-item {
    font-size: 14px;
    & + .form-item {
      margin: 30px 0 0 0;
    }
    .form-item-label {
      display: inline-block;
    }
    .form-item-val {
      // display: inline-block;
      float: right;
      text-align: right;
      input {
        width: auto;
        text-align: right;
        color: #64abff;
        background: none;
        border: none;
      }
    }
  }
}

.loan-btn {
  display: block;
  margin: 42px auto;
  width: 192px;
  height: 70px;
  line-height: 70px;
  // border: 1px solid #ccc;
  background-image: url("../assets/images/loan/btn.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: none;
  color: ccc;
  font-size: 20px;

  &.active {
    color: #fff;
    background-image: url("../assets/images/loan/btn_active.png");
  }
}

.radio {
  /deep/ .van-radio__label {
    color: #64abff;
  }
}

.voice-img {
  position: fixed;
  display: block;
  width: 80px;
  right: 0;
  margin-top: -120px;
  z-index: 10;
}

.tips-img {
  position: fixed;
  display: block;
  width: 80%;
  right: 10%;
  top: 30px;
  z-index: 9;
}
</style>
